// import React, { RefObject, useEffect, useState } from 'react';

// const useElementPosition = (ref: RefObject<HTMLDivElement>) => {
//   const [elementPosition, setElementPosition] = useState<DOMRect>();

//   useEffect(() => {
//     if (!ref.current) return;
//     const updatePosition = () => {
//       const position = ref.current?.getBoundingClientRect();
//       setElementPosition(position);
//     };

//     updatePosition();

//   }, [ref]);

//   return elementPosition;
// };

// export default useElementPosition;

import { useState, useEffect, RefObject } from 'react';

const useElementPosition = (elementRef: RefObject<HTMLElement>) => {
  const [position, setPosition] = useState({ top: 0, left: 0, right: 0, bottom: 0 });

  useEffect(() => {
    if (!elementRef.current) return;

    const updatePosition = () => {
      const element = elementRef.current;
      if (element) {
        const rect = element.getBoundingClientRect();
        setPosition({
          top: rect.top,
          left: rect.left,
          right: rect.right,
          bottom: rect.bottom,
        });
      }
    };

    updatePosition();

    const resizeObserver = new ResizeObserver(updatePosition);
    resizeObserver.observe(elementRef.current);

    return () => {
      resizeObserver.disconnect();
    };
  }, [elementRef]);

  return position;
};

export default useElementPosition;
